<!--
 * @Description: {{ByRuin}}
 * @Version: 2.0
 * @Author: Ruin 🍭
 * @Date: 2021-12-20 13:18:49
 * @LastEditors: 刘引
 * @LastEditTime: 2021-12-27 14:45:31
-->

<template>
  <div class="root">
    <div class="w">
      <div class="container">
        <div class="left">
          <div>
            <h4>基本信息</h4>
            <ul>
              <li>
                <span>bom文件:</span>
                <span class="right">
                  <h2 style="font-weight: normal;">拖拽BOM文件至此框</h2>
                  <el-button
                    class="upload-btn"
                    type="primary"
                    color="#ea5404"
                    size="medium"
                  >点击上传bom文件</el-button>
                  <p>*仅支持xls、xlsx、csv格式，文件最大 10 MB</p>
                </span>
              </li>
              <li>
                <span>产品名称:</span>
                <el-input placeholder="请输入" v-model="inputProduct" />
              </li>
              <li>
                <span>板子数量:</span>
                <el-input placeholder="请输入" v-model="inputBorder">
                  <template #append>pcs</template>
                </el-input>
              </li>
              <li>
                <span>贴片物料种类:</span>
                <el-input placeholder="请输入" v-model="inputKind">
                  <template #append>种</template>
                </el-input>
              </li>
            </ul>
          </div>

          <div>
            <h4>特殊工艺要求</h4>
            <ul>
              <li>
                <span>刷三防漆:</span>
                <span>
                  <ul>
                    <li
                      v-for="(item,index) in selectTab.selectTab1"
                      :key="item.id"
                      :class="{ active: isActive.isActive1 === index }"
                      @click="changeSecect(1, index)"
                    >{{ item.content }}</li>
                  </ul>
                </span>
              </li>

              <li>
                <span>烧录程序:</span>
                <span>
                  <ul>
                    <li
                      v-for="(item,index) in selectTab.selectTab2"
                      :key="item.id"
                      :class="{ active: isActive.isActive2 === index }"
                      @click="changeSecect(2, index)"
                    >{{ item.content }}</li>
                  </ul>
                </span>
              </li>

              <li>
                <span>功能测试:</span>
                <span>
                  <ul>
                    <li
                      v-for="(item,index) in selectTab.selectTab3"
                      :key="item.id"
                      :class="{ active: isActive.isActive3 === index }"
                      @click="changeSecect(3, index)"
                    >{{ item.content }}</li>
                  </ul>
                </span>
              </li>

              <li>
                <span>BGA是否X-ray全检测:</span>
                <span>
                  <ul>
                    <li
                      v-for="(item,index) in selectTab.selectTab4"
                      :key="item.id"
                      :class="{ active: isActive.isActive4 === index }"
                      @click="changeSecect(4, index)"
                    >{{ item.content }}</li>
                  </ul>
                </span>
              </li>

              <li>
                <span>PCB拼版方式:</span>
                <span>
                  <ul>
                    <li
                      v-for="(item,index) in selectTab.selectTab5"
                      :key="item.id"
                      :class="{ active: isActive.isActive5 === index }"
                      @click="changeSecect(5, index)"
                    >{{ item.content }}</li>
                  </ul>
                </span>
              </li>
            </ul>
          </div>

          <div>
            <ul>
              <h4>钢网:</h4>
              <li
                v-for="(item,index) in selectTab.selectTab6"
                :key="item.id"
                :class="{ active: isActive.isActive6 === index }"
                @click="changeSecect(6, index)"
              >{{ item.content }}</li>
            </ul>
            <p>
              <span>订单联系人:</span>
              <el-input v-model="input" placeholder="请输入联系人名称" />
              <el-input v-model="input" placeholder="请输入联系人电话" />
              <span class="active change">更换联系人</span>
            </p>
            <p class="js">
              <span>技术联系人:</span>
              <el-input v-model="input" placeholder="请输入联系人名称" />
              <el-input v-model="input" placeholder="请输入联系人电话" />
              <span class="active change">更换联系人</span>
            </p>
          </div>
        </div>

        <div class="right">
          <div>
            <h4>备注</h4>
            <el-input
              v-model="textarea"
              maxlength="500"
              placeholder="请填写订单其他需求以便，我们尽可能清楚了解您的需求"
              show-word-limit
              type="textarea"
              resize="none"
            />
            <div class="table">
              <table>
                <thead>
                  <tr>
                    <th>交期</th>
                    <th>价格</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>
                      <form class="radio">
                        <input type="radio" name="time" />
                        <label for="time">正常1-5天</label>
                      </form>
                    </td>
                    <td>¥0</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="argus">
              <span>SMT参数详情</span>
            </div>
            <div class="introduce">
              <p>此价格仅供参考</p>
              <p>实际价格以审核后的金额为准，请耐心等候优化后的报价系统</p>
            </div>
            <div class="price">
              <p>
                <span>SMT价格（不含运费）</span>
                <span>￥200</span>
              </p>
              <div class="btn">
                <el-button class="service" type="primary" color="#ea5404" size="medium">客服快速询价</el-button>
                <el-button class="submit" type="primary" color="#ea5404" size="medium">提交订单核价</el-button>
              </div>
            </div>
          </div>
          <div>
            <img src="../../assets/img/home/new-custom.jpeg" alt />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  data() {
    return {
      ad: 1234,
      inputProduct: '',
      inputBorder: '',
      inputKind: '',
      isActive: {
        default: 0,
        isActive1: 1,
        isActive2: 1,
        isActive3: 0,
        isActive4: 1,
        isActive5: 1,
        isActive6: 0,
      },
      selectTab: {
        selectTab1: [{
          id: 0,
          content: '需要'
        }, {
          id: 1,
          content: '不需要'
        }],
        selectTab2: [{
          id: 0,
          content: '需要'
        }, {
          id: 1,
          content: '不需要'
        }],
        selectTab3: [{
          id: 0,
          content: '需要'
        }, {
          id: 1,
          content: '不需要'
        }],
        selectTab4: [{
          id: 0,
          content: '是'
        }, {
          id: 1,
          content: '否'
        }],
        selectTab5: [{
          id: 0,
          content: '有拼版，不用分版'
        }, {
          id: 1,
          content: '有拼版，需要分版'
        }, {
          id: 2,
          content: '无拼版'
        }], selectTab6: [{
          id: 0,
          content: '硬之城定制'
        }, {
          id: 1,
          content: '官网提供'
        }]

      },
      textarea: ''

    }
  },
  methods: {
    changeSecect(id, e) {
      switch (id) {
        case 1:
          this.isActive.isActive1 = e;

          break;
        case 2:
          this.isActive.isActive2 = e;
          this.judge(id);

          break;
        case 3:
          this.isActive.isActive3 = e;


          break;
        case 4:
          this.isActive.isActive4 = e;
          break;
        case 5:
          this.isActive.isActive5 = e;
          break;
        case 6:
          this.isActive.isActive6 = e;
          break;
        default:
          break;
      }


    },

  },

}
</script>
<style lang="scss" scoped>
.root {
  background-color: #f6f6f6;
  padding-top: 20px;
  padding-bottom: 20px;
  .w {
    .container {
      display: flex;
      position: relative;
      justify-content: space-between;
      h4 {
        font-size: 14px;
        color: #333333;
      }
      ul li span {
        font-size: 12px;
        width: 128px;
        height: 28px;
      }
      .left {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 846px;
        div {
          background-color: #fff;
          width: 740px;
          box-sizing: border-box;
          padding: 20px;
          &:nth-child(1) {
            height: 339px;
            ul {
              li {
                height: 30px;
                margin: 20px 0;
                line-height: 30px;
                &:nth-child(1) {
                  height: 120px;
                }
                // &:nth-child(4)
                &:nth-child(4) {
                  margin-top: 18px !important;
                  overflow: hidden;
                  :deep(.el-input-group__append) {
                    padding: 0 4px;
                    margin-bottom: 0 !important;
                    padding-bottom: 0 !important;
                  }
                }
                &:nth-child(3),
                &:nth-child(4) {
                  margin-bottom: 0;
                  margin-top: 0;
                  :deep(.el-input) {
                    width: 310px !important;
                    height: 30px !important;
                    .el-input__inner {
                      width: 310px !important;
                      height: 30px !important;
                    }
                  }
                }

                display: flex;
                span {
                  &:nth-child(1) {
                    &::before {
                      content: "*";
                      color: #f56c6c;
                      margin: 0 5px;
                    }
                    &::after {
                      content: "?";
                      box-sizing: border-box;
                      color: #f56c6c;
                      font-size: 12px;
                      vertical-align: middle;
                      line-height: 14px;
                      width: 14px;
                      height: 14px;
                      text-align: center;
                      display: inline-block;
                      border-radius: 100%;
                      border: 1px solid #f56c6c;
                      margin: 0 5px;
                    }
                  }
                  &:nth-child(2) {
                    display: inline-block;
                    text-align: center;
                    width: 576px;
                    height: 120px;
                    line-height: 40px;
                    border: 1px dashed #999999;
                    cursor: pointer;

                    p {
                      font-size: 12px;
                      color: #aaa;
                    }
                    &:hover {
                      border: 1px dashed #da5e29;
                    }
                    .upload-btn {
                      color: #fff;
                      font-weight: 300;
                      width: 170px;
                      height: 40px;
                      font-size: 16px;
                    }
                  }
                }
                :deep(.el-input) {
                  width: 350px;
                  height: 30px;
                  padding-left: 0;
                  .el-input__inner {
                    width: 350px;
                    height: 30px;
                    border-radius: 0;
                    &:focus {
                      border-color: #e57470;
                    }
                  }
                  // --el-input-focus-border:color: #da5e29 !important;

                  padding-top: 0;
                }
                :deep(.el-input-group__append) {
                  padding: 0;
                  width: 30px;
                  border-radius: 0;
                  font-size: 12px;
                  padding-bottom: 0 !important;
                }
              }
            }
          }
          &:nth-child(2) {
            height: 316px;
            h4 {
              width: 128px;
              height: 30px;
            }
            ul {
              li {
                padding-top: 20px;
                font-size: 12px;
                color: #151515;
                height: 30px;
                line-height: 30px;
                display: flex;
                &:nth-child(5) {
                  span {
                    &:nth-child(1) {
                      &::before {
                        content: "*";
                        color: #f56c6c;
                        margin: 0 5px;
                      }
                      &::after {
                        content: "?";
                        box-sizing: border-box;
                        color: #f56c6c;
                        font-size: 12px;
                        vertical-align: middle;
                        line-height: 14px;
                        width: 14px;
                        height: 14px;
                        text-align: center;
                        display: inline-block;
                        border-radius: 100%;
                        border: 1px solid #f56c6c;
                        margin: 0 5px;
                      }
                    }
                  }
                }
                span {
                  &:nth-child(2) {
                    ul {
                      display: flex;
                      justify-content: flex-start;
                      width: 610px;
                      li {
                        cursor: pointer;
                        margin: 0 5px;
                        height: 30px;
                        line-height: 30px;
                        padding: 0px 15px;
                        // margin-right: 5px;
                        // box-sizing: border-box;

                        border: 1px solid #cccccc;
                        border-radius: 1px;
                        color: #333;
                      }
                    }
                  }
                }
              }
            }
          }
          &:nth-child(3) {
            height: 171px;
            ul {
              display: flex;
              h4 {
                width: 128px;
                height: 30px;
                font-weight: normal;
                font-size: 12px;
                line-height: 30px;
              }
              li {
                font-size: 12px;
                cursor: pointer;
                margin: 0 5px;
                height: 30px;
                line-height: 30px;
                padding: 0px 15px;
                border: 1px solid #cccccc;
              }
            }
            .js {
              span {
                &:before {
                  content: "*";
                  color: #fff;
                  padding: 0 5px;
                }
              }
            }

            p {
              display: flex;
              display: block;
              height: 50px;
              line-height: 50px;
              // margin: 15px 0;
              .change {
                width: 92px;
                height: 30px;
                margin-left: 25px;
                padding: 5px;
                padding-left: 15px;
                padding-right: 15px;
                color: #ea5504;
                &:before {
                  content: "" !important;
                  padding: 0 !important;
                }
              }
              :deep(.el-input) {
                width: 150px;
                height: 30px;
                margin: 0 10px;
                font-size: 12px;
                .el-input__inner {
                  width: 150px;
                  height: 30px;
                  border-radius: 0;
                  &:focus {
                    border-color: #dddfe5;
                  }
                }
              }

              span {
                font-size: 12px;
                &:nth-child(2) {
                  display: flex;
                }
              }

              &:nth-child(2) {
                span {
                  &:before {
                    content: "*";
                    color: #da5e29;
                    padding: 0 5px;
                  }
                }
              }
            }
          }
        }
        .active {
          background: #fff2ee;
          border: 1px solid #ea5504 !important;
        }
      }
      .right {
        width: 440px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        div {
          background-color: #fff;
          &:nth-child(1) {
            padding: 28px 20px 35px;
            height: 480px;
            :deep(.el-textarea) {
              height: 130px;
            }
            :deep(.el-textarea__inner) {
              &:focus {
                border-color: #da5e29;
              }
              height: 130px;
            }
            .table {
              margin: 20px 0;
              table {
                width: 400px;
                height: 82px;
                border: 1px solid #c4c4c4;
                text-align: center;
                thead {
                  height: 40.5px;
                  background-color: #fdf2ef;
                }
                th {
                  font-size: 12px;
                  color: #2c3e50;
                }
                tbody {
                  font-size: 14px;
                }
                .radio {
                  input {
                    vertical-align: middle;
                  }
                  label {
                    padding: 0 10px;
                    color: #606266;
                  }
                }
              }
            }
            .argus {
              height: 40px;
              font-size: 12px;
              color: #333333;
              // line-height: 40px;
              line-height: 20px;
              font-weight: 600;
              border: 1px solid #c4c4c4;
              padding: 10px;
              box-sizing: border-box;
              &:after {
                content: ">";
                color: gray;
                font-size: 16px;
                padding: 0 6px;
              }
            }
            .introduce {
              font-size: 12px;
              color: #ea5504;
              margin: 15px 0;
            }
            .price {
              p {
                display: flex;
                align-items: center;
                justify-content: space-between;
                span {
                  &:nth-child(1) {
                    font-size: 16px;
                    color: #999;
                  }
                  &:nth-child(2) {
                    font-size: 20px;
                    color: #ea5504;
                  }
                }
              }
              .btn {
                height: auto !important;
                :deep(.el-button) {
                  border-radius: 0 !important;
                  width: 190px !important;
                  height: 45px !important;
                }
                .service {
                  background-color: #fdf2ef;
                  color: #da5e29;
                  margin: 10px 0;
                }
              }
            }
          }
          &:nth-child(2) {
            height: 280px;
          }
        }
      }
    }
  }
}
</style>
